<template>
	<view>
		<view class="">
			<!-- 搜索框 -->
			<u-search style="margin: 10px 2vw;" shape="round" placeholder="请输入要添加好友的账号:" :showAction="false"
				:clearabled="false" @search="goToAddFriend"></u-search>

			<view class="" v-if="myInfo!=null">
				<view class="friendList">
					<u-avatar :src="myInfo.image" size="16vw"></u-avatar>
					<view class="userInfoBox">
						<view class="userName">
							{{myInfo.name}}
						</view>
						<view class="personalSignature">
							{{myInfo.personalSignature}}
						</view>
					</view>
				</view>

				<view class="detail" v-if="show">
					<view class="title">请填写验证信息</view>
					<view class="change">
						<input class="choose" type="text" @input="changeContent">
					</view>

					<view class="title">请填写备注</view>
					<view class="change">
						<input class="choose" type="text" @input="changeNotes">
					</view>

					<view class="send" @click="sendMessage">
						发送
					</view>
				</view>
			</view>

			<view v-if="myInfo==null" style="text-align: center; margin-top: 10px;">
				查无此人，请检查账号是否正确
			</view>

		</view>


	</view>
</template>

<script>
	import {
		socket
	} from '../../../utils/socket.js';
	export default {
		data() {
			return {
				account: "",
				myInfo: {},
				userId: "",
				content: "",
				notes: "",
				nameMap: {},
				index: 0,
				friendIdList: [],
				show: false
			};
		},
		onLoad(e) {
			this.userId = uni.getStorageSync("userId")
			this.account = e.account
			this.nameMap = new Map(Object.entries(JSON.parse(uni.getStorageSync("friendName"))));
			this.searchFriend(e.account)
		},
		methods: {
			changeContent(e) {
				this.content = e.detail.value
				console.log(e.detail.value)
			},
			changeNotes(e) {
				this.notes = e.detail.value
				console.log(e.detail.value)
			},
			goToAddFriend(e) {
				if (e == "") {
					uni.showToast({
						title: "账号为空",
						icon: 'error'
					})
				} else {
					this.account = e
					this.searchFriend(e)
				}
			},
			searchFriend(account) {
				uni.request({
					url: getApp().url + 'user/getUserByAccount',
					data: {
						account: account
					},
					header: {
						token: uni.getStorageSync("token")
					},
					method: "GET",
					success: (res) => {
						this.myInfo = res.data.data
						console.log(this.myInfo)
						setTimeout(() => {
							console.log(this.nameMap.get(res.data.data.id+""))
							console.log(this.nameMap.get(3+""))
							 if (this.nameMap.get(res.data.data.id+"") == null) {
							 	this.show = true;
							 }
						}, 100)
					},
					fail: (error) => {
						console.log(error);
					}
				})
			},
			sendMessage() {
				if (this.content == "") {
					uni.showToast({
						icon: "error",
						title: "请填写验证信息"
					})
				} else if (this.notes == "") {
					uni.showToast({
						icon: "error",
						title: "请填写好友备注"
					})
				 } else {
					uni.request({
						url: getApp().url + 'friend/addFriend',
						data: {
							userId: this.userId,
							friendId: this.myInfo.id,
							note: this.notes,
							content: this.content,
							agree: 0
						},
						header: {
							token: uni.getStorageSync("token")
						},
						method: "POST",
						success: (res) => {
							console.log(res)
						},
						fail: (error) => {
							console.log(error);
						}
					})

					uni.showToast({
						title: "已发送请求",
						icon: 'success'
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	.friendList {
		display: flex;
		padding: 5px 5vw;

		.userInfoBox {
			width: 74vw;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.userName {
				margin-left: 2vw;
			}

			.personalSignature {
				margin-left: 2vw;
				font-size: small;
				color: #A09D9D;
			}
		}
	}

	.detail {
		margin: 0 5vw;

		.title {
			margin-top: 20px;
			color: #A09D9D;
			line-height: 40px;
		}

		.change {
			display: flex;
			height: 40px;

			.choose {
				width: 90vw;
				height: 40px;
				text-align: center;
				line-height: 40px;
				margin-right: 5vw;
				box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
			}
		}


		.send {
			margin-top: 30px;
			height: 40px;
			line-height: 40px;
			border-radius: 20px;
			text-align: center;
			color: #FFF;
			background-color: #41A863;
		}
	}
</style>